<template>
  <a-layout-sider>
    <div class="sider">
      <div class="logo">
        <img src="@/assets/image/menu/logo.png" alt="">
      </div>
      <!--      <div class="menu">-->
      <!--        -->
      <!--&lt;!&ndash;        <div class="menu-item" v-for="(item, index) in menus" :key="index">{{ item.meta.title }}</div>&ndash;&gt;-->
      <!--      </div>-->
      <a-menu
          mode="inline"
          :default-selected-keys="[0]"
          :default-open-keys="['sub1']"
          :style="{ height: 'calc(100% - 64px);', borderRight: 0 }"
      >
        <template v-for="(item, index) in menus">
          <a-sub-menu :key="index" v-if="item.children&&item.children.length">
            <span slot="title"><a-icon type="user" />subnav 1</span>
            <template v-for="(v, i) in item.children">
              <a-menu-item :key="i">
                {{ v.meta.title }}
              </a-menu-item>
            </template>
          </a-sub-menu>
          <a-menu-item @click="linkPage(item)" :key="index" v-else>
            {{ item.meta.title }}
          </a-menu-item>
        </template>
      </a-menu>
    </div>

  </a-layout-sider>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Header',
  data () {
    return {};
  },
  props: {},
  methods: {
    linkPage: function (item) {
      this.$router.push({ path: item.path });
    }
  },
  mounted () {

  },
  created () {

  },
  computed: {
    ...mapState({
      // 动态主路由
      menus (state) {
        if (state.permission.addRouters && state.permission.addRouters.length > 0) {
          return state.permission.addRouters[0].children;
        }
      }
    })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.sider {
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $white;
  width: 200px;

  img {
    height: 64px;
  }
}

.menu {
  text-align: center;
  margin-top: 20px;

  .menu-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $white;
    width: 100%;
  }
}
</style>
